<template>
    <div class="zstp_wrap">
        <div class="page-content">
            <div class="chart-box" ref="chartBox"></div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        methods: {
            chartLoad( obj ) {
                var _this = this;
                var chart = this.$echarts.init( this.$refs.chartBox );

                var option = {
                    tooltip: {
                        formatter: "{c}"
                    },
                    animationDuration: 1500,
                    animationEasingUpdate: 'quinticInOut',
                    series: [{
                        type: "graph",
                        layout: "circular",
                        focusNodeAdjacency: true, // 指定的节点以及其所有邻接节点高亮
                        roam: false, // 是否可拖拽
                        symbolSize: [100, 100],
                        categories: "categories",
                        lineStyle: {
                            normal: {
                                width: 2,
                                shadowColor: "none",
                                color: "#142F54",
                                // curveness: 0.1
                            }
                        },
                        emphasis: {
                            focus: 'adjacency',
                            lineStyle: {
                                width: 10
                            }
                        },
                        label: {
                            show: true,
                        },
                        data: [
                            {
                                name: "15625698563",
                            },
                            {
                                name: "17825690251",
                            },
                            {
                                name: "15569865236",
                            },
                            {
                                name: "13256981457",
                            },
                            {
                                name: "17814589651",
                            }
                        ],

                        links: [
                            {
                                source: "15625698563",
                                value: "支付宝:123",
                                target: "17825690251"
                            },
                            {
                                source: "17825690251",
                                value: "身份证：123 ",
                                target: "15625698563"
                            },
                            {
                                source: "15625698563",
                                value: "身份证：222 ",
                                target: "15569865236"
                            },
                            {
                                source: "15569865236",
                                value: "身份证：236 ",
                                target: "13256981457"
                            },
                            {
                                source: "17825690251",
                                value: "手机号：1832222XXXX ",
                                target: "13256981457"
                            },
                            {
                                source: "17825690251",
                                value: "手机号：1861111XXXX ",
                                target: "17814589651"
                            },
                            {
                                source: "15569865236",
                                value: "支付宝:456789 ",
                                target: "17814589651"
                            }
                        ]
                    }]
                };

                chart.setOption( option );
            },
        },
        mounted() {
            // this.chartLoad();
        }
    }
</script>

<style lang="less">
    .zstp_wrap {
        width: 100%;
        height: 100%;
        position: relative;

        >.page-content {
            width: 100%;
            height: 100%;
            height: 919px;
            background-image: url("../../assets/images/zstp/img_page.png");
            background-position: center;
            /*background-color: #FFFFFF;*/
            /*background-image: url("../../assets/images/page/bg_page.png");*/
            /*background-size: 100% 100%;*/
            /*border-radius: 8px;*/

            >.chart-box {
                width: 100%;
                height: 100%;
            }
        }
    }
</style>
